<template>
    <div class="contact-us" ref="contactUs">
        <div class="contact-box">
            <form action="">
                <div class="contact-info">
                    <h2 class="title">联系我们</h2>
                    <ul class="contact">
                        <li class="user-name"><input type="text" placeholder="您的姓名"></li>
                        <li class="company"><input type="text" placeholder="公司名称"></li>
                        <li class="tel-phone">
                            <input class="write-number" type="text" placeholder="请输入您的手机号码">
                            <button class="send-number">发送验证码</button>
                        </li>
                        <li class="ver-code"><input type="text" placeholder="请输入您收到的手机验证码"></li>
                    </ul>
                    <div class="clear"></div>
                    <button class="sub-btn">确认</button>
                </div>
                <div class="custome">
                    <h2 class="title">客户服务</h2>
                    <div class="info">
                        <p>客服邮箱：Lilyai@tvunetworks.co</p>
                        <p>客服电话：4009699192</p>
                    </div>
                    <div class="info">
                        <p>客服微信：tvukefu2018</p>
                        <p>周一到周四 9:00-18:00</p>
                        <p>周五到周日 8:00-20:00</p>
                    </div>
                </div>
            </form>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
export default {
    methods: {
        initial() {
            let wh = window.innerWidth;
            if (wh >= 768 && wh < 1300) {
                // PC端
                this.$refs.contactUs.style.height = 0.448 * wh + 'px';
            } else if (wh < 768) {
            } else {
                this.$refs.contactUs.style.height = '860px';
            }
        }
    },
    mounted() {
        this.initial();
        window.addEventListener('resize', this.initial);
    }
};
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
    @import "~common/stylus/variable"
    @import "~common/stylus/mixin"
    .contact-us
        width 100%
        min-height 786px
        background rgba(255,149,139,1)
        position relative
        .contact-box
            width 1130px
            height 580px
            padding 104px 110px
            background #fff
            position absolute
            top 50%
            left 50%
            transform translate(-50%,-50%)
            -webkit-transform translate(-50%,-50%)
            -ms-transform translate(-50%,-50%)
            .contact-info
                width 60%
                float left
                display inline-block
                .title
                    width 100%
                    height 33px
                    font-size 24px
                    font-family PingFangSC-Medium;
                    font-weight 500
                    color rgba(51,51,51,1)
                    line-height 33px
                li
                    margin-top 20px
                    width 100%
                    input
                        border 1px solid #F0F0F0
                        border-radius 2px
                        height 44px
                        width 500px
                        line-height 44px
                        text-indent 16px
                .tel-phone
                    .write-number
                        width 300px
                        margin-right 70px
                        display inline-block
                        float left
                    .send-number
                        display inline-block
                        height 44px
                        background #FF7878
                        color #fff
                        font-size 14px
                        cursor pointer
                        width 130px
                .sub-btn
                    display block
                    width 160px
                    height 44px
                    background #FF7878
                    border-radius 22px
                    color #fff
                    font-size 14px
                    margin-top 30px
                    cursor pointer
        .custome
            width 40%
            display inline-block
            float left
            .title
                    width 100%
                    height 33px
                    font-size 24px
                    font-family PingFangSC-Medium;
                    font-weight 500
                    color rgba(51,51,51,1)
                    line-height 33px
            .info
                width 290px
                border 1px solid #F0F0F0
                border-radius 4px
                padding 20px
                color #666
                font-size 14px
                letter-spacing 1px
                margin-top 20px
                line-height 20px
                color #666
@media screen and (max-width 1300px)
    .contact-us
        .contact-box
            width 700px
            height 400px
            padding 50px 50px
            .contact-info
                width 60%
                .title
                    height 25px
                    font-size 20px
                    line-height 20px
                li
                    margin-top 15px
                    input
                        height 35px
                        width 300px
                        line-height 30px
                        text-indent 12px
                .tel-phone
                    .write-number
                        margin-right 20px
                        width 180px
                    .send-number
                        height 35px
                        width 100px
                .sub-btn
                    width 110px
                    height 35px
                    border-radius 20px
                    color #fff
                    margin-top 30px
        .custome
            .title
                    height 25px
                    font-size 22px
                    line-height 20px
            .info
                width 230px
                padding 15px
                font-size 13px
                margin-top 15px
</style>
